<template>
  <div class="hmi-home full-screen">
    <div class="header">
      <div class="title">
        <span class="device">{{ deviceName || "ESP811 测控保护平台" }}</span>
        <span class="time">{{ now }}</span>
      </div>
      <div class="sub">实时大屏</div>
    </div>

    <el-row :gutter="14" class="grid">
      <el-col :span="8" :xs="24"><LcdLightsCard :items="lcdList" /></el-col>
      <el-col :span="8" :xs="24"><StatusBarCard :items="statusList" /></el-col>
      <el-col :span="8" :xs="24"><StateChangeCard :items="stateChangeList" /></el-col>
      <el-col :span="12" :xs="24"><ChannelCard :items="channelSimple" /></el-col>
      <el-col :span="12" :xs="24"><HjumperCard :items="hjumperList" /></el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, computed } from "vue";
import { useClock } from "@/composables/useClock";
import { usePolling } from "@/composables/usePolling";
import { useDeviceInfoStore } from "@/store/modules/hmi/device-info.store";
import { useHomeStore } from "@/store/modules/hmi/home.store";

import LcdLightsCard from "@/components/hmi/home/LcdLightsCard.vue";
import StatusBarCard from "@/components/hmi/home/StatusBarCard.vue";
import StateChangeCard from "@/components/hmi/home/StateChangeCard.vue";
import ChannelCard from "@/components/hmi/home/ChannelCard.vue";
import HjumperCard from "@/components/hmi/home/HjumperCard.vue";

import type {
  LcdItem,
  StatusBarItem,
  StateChangeItem,
  ChannelItem,
  ChannelSimpleItem,
  HjumperItem,
} from "@/api/hmi/home.api";

defineOptions({ name: "HmiHome" });

// 实时时钟
const { now } = useClock();

// 设备名称
const deviceInfoStore = useDeviceInfoStore();
const deviceName = computed(() => deviceInfoStore.getDeviceBasicInfo()?.[0]?.装置名称 || "");

// 本地数据源（按规范：View 中使用本地变量保存数据）
const lcdList = ref<LcdItem[]>([]);
const statusList = ref<StatusBarItem[]>([]);
const stateChangeList = ref<StateChangeItem[]>([]);
const channelList = ref<ChannelItem[]>([]);
const channelSimple = computed<ChannelSimpleItem[]>(() =>
  homeStore.toChannelSimple(channelList.value)
);
const hjumperList = ref<HjumperItem[]>([]);

// Store 与轮询
const homeStore = useHomeStore();
const CPU = 1;

const pollLcd = usePolling(async () => {
  try {
    const res = await homeStore.fetchLcd();
    if (res) lcdList.value = res;
  } catch (e: any) {
    console.error("轮询 LCD 失败", e);
  }
}, 1000);

const pollStatus = usePolling(async () => {
  try {
    const res = await homeStore.fetchStatusBar(0);
    const res1 = await homeStore.fetchStatusBar(1);
    res?.push(...(res1 || []));
    if (res) statusList.value = res;
  } catch (e: any) {
    console.error("轮询状态栏失败", e);
  }
}, 1000);

const pollStateChange = usePolling(async () => {
  try {
    const res = await homeStore.fetchStateChange(CPU);
    if (res) stateChangeList.value = res;
  } catch (e: any) {
    console.error("轮询变位失败", e);
  }
}, 1000);

const pollChannel = usePolling(async () => {
  try {
    const res = await homeStore.fetchChannels(CPU);
    if (res) channelList.value = res;
  } catch (e: any) {
    console.error("轮询通道失败", e);
  }
}, 1000);

const pollHjumper = usePolling(async () => {
  try {
    const res = await homeStore.fetchHjumpers(CPU);
    if (res) hjumperList.value = res;
  } catch (e: any) {
    console.error("轮询硬压板失败", e);
  }
}, 1000);

onMounted(async () => {
  // 获取一次装置信息（含装置名称）
  try {
    await deviceInfoStore.fetchDeviceInfo();
  } catch (err) {
    console.error("获取装置信息失败", err);
  }

  // 启动 5 类数据的 1s 轮询
  pollLcd.start();
  pollStatus.start();
  pollStateChange.start();
  pollChannel.start();
  pollHjumper.start();
});

onBeforeUnmount(() => {
  pollLcd.stop();
  pollStatus.stop();
  pollStateChange.stop();
  pollChannel.stop();
  pollHjumper.stop();
});
</script>

<style scoped lang="scss">
.full-screen {
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
}
.header {
  margin-bottom: 12px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .device {
      font-size: 22px;
      font-weight: 700;
      color: #0f172a;
    }
    .time {
      font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
        monospace;
      color: #334155;
    }
  }
  .sub {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
  }
}
.grid {
  margin-top: 8px;
}
</style>
